<!--
 * @Author: liaoxing
 * @Date: 2022-02-14 14:34:27
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-10 17:38:07
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\components\checkInput\index.vue
-->
<template>
  <div class="checkInput">
    <div class="flex"> 

      <template v-if="prop.type == 'number' && prop.integer">
        <el-form :model="formData" :size="prop.size || 'mini'" class="flex1">
          <el-form-item prop="inputValue" :rules="[
              { validator: checkInputValue, trigger: 'blur'}
            ]">
            <el-input v-model.number="formData.inputValue" @blur="blurEvent"></el-input>
          </el-form-item>
        </el-form>
      </template>

      <template v-else>
        <el-form :model="formData" :size="prop.size || 'mini'" class="flex1">
          <el-form-item prop="inputValue" :rules="[
              { validator: checkInputValue, trigger: 'blur'}
            ]">
            <el-input v-model="formData.inputValue" @blur="blurEvent"></el-input>
          </el-form-item>
        </el-form>
      </template>
      
      <span v-if="prop.unit" style="margin: 22px 0 0px 10px"> {{ prop.unit }} </span>
    </div>
  </div>
</template>

<script>
export default {
  // type, 'precision', 'fill', 'inValue', 'unit', 'placeholder', 'range'
  props: ['type', 'prop', 'otherProp', 'inValue'],
  name: "checkInput",
  data () {
    return {
      formData: {
        inputValue: ''
      },
      checkInputValue: null
    }
  },
  watch: {
    'formData.inputValue': {
      deep: true,
      handler (value) {
        if (value && this.prop.precision) {
          const strList = value.split('.')
          if (strList.length > 1) {
            if (strList[1].length > this.prop.precision) {
              this.formData.inputValue = strList[0] + '.' + strList[1].slice(0, this.prop.precision)
            }
          }
        }
        this.$emit('update:inValue', value)
      }
    },
    inValue (value) {
      this.formData.inputValue = value
    }
  },
  created () {
    this.formData.inputValue = this.inValue
    this.checkInputValue = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (this.prop.type == 'number') {
        if (this.prop.integer) {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'))
          }
        } else {
          if (typeof (value * 1) !== 'number' || isNaN(value * 1)) {
            callback(new Error('请输入数字值'))
          }
        }
        
      } else {
        if (this.prop.range) {
          if (value > this.prop.range[1] || value < this.prop.range[0]) {
            callback(new Error('请输入正确数字值'))
          }
        } else if(this.prop.integer) {
          let strList = (value + '').split('.')
          if (strList.length > 1) {
            callback(new Error('请输入正确数字值'))
          }
        } 
      }

      callback()
    }
  },
  methods: {
    blurEvent () {

      this.$emit('inputChange', this.otherProp)
    }
  }
}
</script>

<style lang="less">
.checkInput{
  /* min-height: 100%; */
  width: 100%;
  min-width: 80px;
  .el-form-item--mini.el-form-item{
    margin: 18px 0;
  }
}
</style>